<template>
  <nav>
    <ul>
      <router-link to="/film" tag="li" active-class="active">
        <span>电影</span>
        <i class="iconfont icon-tongzhidan"></i>
      </router-link>
      <router-link to="/cinema" tag="li" active-class="active">
        <span>影院</span>
        <i class="iconfont icon-tongzhidan"></i>
      </router-link>
      <router-link to="/center" tag="li" active-class="active">
        <span>我的</span>
        <i class="iconfont icon-tongzhidan"></i>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style lang="scss" scoped>
.active {
  color: red;
}

nav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;

  ul {
    display: flex;

    li {
      flex: 1;
      text-align: center;
      list-style: none;
    }
  }
}
</style>
